<template>
  <el-card>
    <Cailiao class="compo" @transfer="getTransferValue" @transferToFather="getTransferFromSon" :confirm="c" v-if="alive"></Cailiao>
    <Yinshua class="compo" :Q="q" :x="x" :y="y" @transferToFather="getTransferFromSon" :confirm="c" v-if="alive"></Yinshua>
    <Fumo class="compo" :Q="q" :x="x" :y="y" @transferToFather="getTransferFromSon" :confirm="c" v-if="alive"></Fumo>
    <Guoyou class="compo" :Q="q" :x="x" :y="y" :k="k" @transferToFather="getTransferFromSon" :confirm="c" v-if="alive"></Guoyou>
    <Biaozhi class="compo" :Q="q" :x="x" :y="y" :m="m" @transferToFather="getTransferFromSon" :confirm="c" v-if="alive"></Biaozhi>
    <Zhanhe class="compo" :Q="q" :x="x" :y="y" :m="m" @transferToFather="getTransferFromSon" :confirm="c" v-if="alive"></Zhanhe>
    <Jitu class="compo" :Q="q" :x="x" :y="y" :m="m" @transferToFather="getTransferFromSon" :confirm="c" v-if="alive"></Jitu>
    <Tangjin class="compo" :Q="q" :x="x" :y="y" :m="m" @transferToFather="getTransferFromSon" :confirm="c" v-if="alive"></Tangjin>
    <Yawen class="compo" :Q="q" :x="x" :y="y" :m="m" :k="k" @transferToFather="getTransferFromSon" :confirm="c" v-if="alive"></Yawen>
    <Zheguangyawen class="compo" :Q="q" :x="x" :y="y" :m="m" @transferToFather="getTransferFromSon" :confirm="c" v-if="alive"></Zheguangyawen>
    <Moqie class="compo" :Q="q" :x="x" :y="y" @transferM="getTransferValueM" @transferToFather="getTransferFromSon" :confirm="c" v-if="alive"></Moqie>
    <Zhanchuang class="compo" :Q="q" :x="x" :y="y" :m="m" @transferToFather="getTransferFromSon" :confirm="c" v-if="alive"></Zhanchuang>
    <Qie class="compo" :Q="q" :x="x" :y="y" :m="m" @transferToFather="getTransferFromSon" :confirm="c" v-if="alive"></Qie>
    <Jiyan class="compo" :Q="q" :x="x" :y="y" :m="m" @transferToFather="getTransferFromSon" :confirm="c" v-if="alive"></Jiyan>
    <br/>
    <el-button type="primary" @click="clickToGet()">提交订单</el-button>
    <el-button type="primary" plain @click="clickToClear()">重置订单</el-button>
  </el-card>
</template>

<script>
import Cailiao from './module/Cailiao'
import Yinshua from './module/Yinshua'
import Fumo from './module/Fumo'
import Guoyou from './module/Guoyou'
import Jitu from './module/Jitu'
import Jiyan from './module/Jiyan'
import Qie from './module/Qie'
import Tangjin from './module/Tangjin'
import Yawen from './module/Yawen'
import Zheguangyawen from './module/Zheguangyawen'
import Zhanhe from './module/Zhanhe'
import Zhanchuang from './module/Zhanchuang'
import Moqie from './module/Moqie'
import Biaozhi from './module/Biaozhi'

export default {
  name: 'Module',
  components: {
    Biaozhi,
    Cailiao,
    Yinshua,
    Fumo,
    Guoyou,
    Jitu,
    Jiyan,
    Qie,
    Tangjin,
    Yawen,
    Zheguangyawen,
    Zhanhe,
    Zhanchuang,
    Moqie
  },
  data () {
    return {
      alive: true,
      x: 0,
      y: 0,
      q: 0,
      m: 0,
      k: 0,
      c: false,
      post: {}
    }
  },
  methods: {
    // 其他方法
    getTransferValue (x, y, q, k) {
      console.log(x, y, q, k)
      this.x = x
      this.y = y
      this.q = q
      this.k = k
    },
    getTransferValueM (m) {
      this.m = m
    },
    getTransferFromSon (name, value) {
      this.post[name] = value
    },
    clickToGet () {
      this.c = !this.c
      this.$nextTick(this.clickToPost)
    },
    async clickToPost () {
      let param = {value: JSON.stringify(this.post)}
      const res = await this.$http.post('/CostOfferOrder/insertTemplateOrder', param)
      if (res.data.info) {
        this.$message.success('提交成功!')
      } else {
        this.$message.error('提交失败!')
      }
      this.$nextTick(this.clickToClear)
    },
    clickToClear () {
      this.alive = false
      this.clearAll()
      this.$nextTick(() => (this.alive = true))
    },
    clearAll () {
      this.x = 0
      this.y = 0
      this.q = 0
      this.m = 0
      this.c = false
      this.kezhong = 0
      this.post = {}
    }
  }
}
</script>

<style scoped>
.content{
  margin-top: 20px;
}

.el-button{
  margin-bottom: 10px;
  margin-left: 0 !important;
  margin-right: 10px;
}

.post{
  float: right;
  display: block;
  margin-right: 20px;
}

.compo{
  margin-bottom: 20px;
  width: 100%;
}
</style>
